<template>
  <el-row>
    <el-col :span="20" :offset="2">
      <el-card>
          <el-row class="search_main">
          <el-col :span="3" :offset="1"><h1>搜索结果</h1></el-col>
          <el-col :span="4" :offset="16" class="search_totle">
            共<span class="totle"> {{ pageInfo.totle }} </span>种</el-col>
        </el-row>
        <el-row>
          <el-col   
            :span="20"
            :offset="2"
            class="blogs"
            v-for="(item, index) in blogs"
            :key="index"
          >
            <!-- 博客标题 -->
            <div class="blog_title" @click="toDetail(item.id)">
              {{ item.title }}
            </div>
            <!-- 博客简介 -->
            <div class="blog_content">
               {{ item.intro }}
              <el-image :src="item.imageUrl" fit="scale-down"></el-image>
            </div>
          </el-col>
        </el-row>
        <div>
           <!-- 分页 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageInfo.currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageInfo.totle"
            >
            </el-pagination>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
export default {
  data() {
    return {
      pageInfo: {
          pageSize:5,
          currentPage:1,
          totle:0,
      },
      blogs: [],
      word:"",
    };
  },
  methods: {
    async getBlogByWord(word,currentPage,pageSize){
        var d=await this.$http.get("blog/"+word+"/"+currentPage+"/"+pageSize);
        this.pageInfo=d.data.pageInfo;
        this.blogs=d.data.blogs;
    },
    handleSizeChange(size) {
        this.pageInfo.pageSize = size;
        this.getBlogByWord(this.word,this.pageInfo.currentPage,size)
    },
    handleCurrentChange(page) {
      this.pageInfo.currentPage = page;
      this.getBlogByWord(this.word,page, this.pageInfo.pageSize);
    },
    toDetail(id) {
      this.$http.put("/blogTotle/" + id);
      this.$router.push("/h_detail/" + id);
    }
  },
  mounted: function () {
     this.word= window.sessionStorage.getItem("word")
     window.sessionStorage.removeItem("word");
   this.getBlogByWord(this.word,this.pageInfo.currentPage,this.pageInfo.pageSize)
  },
};
</script>
<style scoped>
.search_main {
  border-bottom: 1px solid #b8c0cc;
  margin-bottom: 50px;
}
.search_totle {
  line-height: 32px;
  font-size: 1.2em;
}
.totle {
  font-size: 1.5em;
  color: red;
}
.blog_title {
  font-size: 1.2em;
  font-weight: 550;
  margin-bottom: 5px;
  cursor: pointer;
}
.blogs {
  margin-bottom: 25px;
  border-bottom: 1px solid #b8c0cc;
}
.blog_content {
  height: 100px;
  margin-bottom: 20px;
  line-height: 35px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.el-image {
  margin-left: 15px;
  width: 150px;
  height: 100px;
  float: right;
}
.blog_user {
  margin-bottom: 10px;
}
.blog_info {
  line-height: 40px;
  color: #b8c0cc;
}
.el-button {
  margin: 10px 10px;
}
</style>